<template>
  <el-container>
    <el-main>
      <div class="body">
        <h1 style="text-align: center;padding: 20px">密码修改</h1>
        <el-form ref="form" :model="user" style="padding: 0px 20px" label-width="85px" :rules="rules">
          <el-form-item label="邮箱:">
            <el-input v-model="email" disabled></el-input>
          </el-form-item>
          <el-form-item label="新的密码:" prop="userpwd">
            <el-input v-model="user.userpwd"></el-input>
          </el-form-item>
          <el-form-item label="确认密码:" prop="userpwd2">
            <el-input v-model="user.userpwd2"></el-input>
          </el-form-item>
          <el-button type="success" style="width: 100%;height: 50px;font-size: 20px" @click="button">确认</el-button>
        </el-form>
      </div>
    </el-main>
  </el-container>
</template>

<script>

import {request} from "@/network/request";
import {ElMessageBox} from "element-plus";

export default {
  name: "ModifyPwd",
  data() {
    // 自定义规则
    let checkpwd = (rule, value, callback) => {
      if (this.$data.user.userpwd !== this.$data.user.userpwd2) {
        callback(new Error("密码二次不一致"));
      } else {
        callback();
      }
    };
    return {
      email: this.$store.state.mail,
      user: {
        userpwd: null,
        userpwd2: null,
      },
      rules: {
        // 密码
        userpwd: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {
            pattern: /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,
            message: '请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种',
            trigger: 'blur'
          },
        ],
        // 二次密码
        userpwd2: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {
            pattern: /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,
            message: '请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种',
            trigger: 'blur'
          },
          {validator: checkpwd, trigger: 'blur', message: '密码不相同',}
        ]
      }
    }
  },
  methods: {
    button() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          request({
            url: '/login/ModifyPwd',
            params: {
              mail: this.$store.state.mail,
              pwd: this.$data.user.userpwd
            }
          }).then(res => {
            if (res.data.success) {
              ElMessageBox.alert('修改成功请重新登录', '提示', {
                confirmButtonText: 'OK',
                callback: () => {
                  this.$router.push("/");
                },
              })
            } else {
              this.$message({
                type: 'warning',
                message: '数据错误' + err.data.message
              });
            }
          }).catch(err => {
            this.$message({
              type: 'warning',
              message: '数据错误' + err.data.message
            });
          })
        } else {
          this.$message({
            type: 'warning',
            message: '校验失败'
          });
        }
      });
    }
  }
}
</script>

<style scoped>
.body {
  border-radius: 10px;
  background-color: white;
  margin: 50px auto;
  width: 400px;
  height: 470px;
}
</style>